<template>
  <div>
    
      <el-row type="flex" class="rowclass" justify="center">
        <el-col class="a" :span="8">
          <div>
            <el-input
              v-model="savedata.name"
              class="input-with-select" 
              placeholder="请输入机构名称">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </div>
          <div>
            <el-input 
            v-model="savedata.tel"
              class="input-with-select" 
              placeholder="请输入预留电话">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </div>
          <div>
            <el-input 
              v-model="savedata.o_rate"
              class="input-with-select" 
              placeholder="请设置分成比例">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </div>
        </el-col>
        
        <el-col class="r" :span="6">
            <input
              id="upload"
              type="file"
              name="img"
              style="display: none"
              @change="getimg"
            />
            <div class="el-upload el-upload--picture-card" @click="ck">
              <div>
                <i slot="default" class="el-icon-plus" />
              </div>
            </div>
            <div
              v-for="(src, x) in imgsrc"
              :key="x"
              class="el-upload--picture-card"
            >
              <span class="close" @click="close(x)">
                <i class="el-icon-delete" />
              </span>
              <el-image
                :src="src.showimg"
                fit="cover"
                style="width: 100%; height: 100%"
              />
            </div>
        </el-col>
      </el-row>
      <el-row type="flex" class="rowclass" justify="center">
        <el-col :span="8">
          <el-input 
            v-model="savedata.address"
            class="input-with-select" 
            placeholder="请输入详细地址">
        </el-input>
        </el-col>
        <el-col :offset="1" :span="5">
          <el-button @click="alert = true" class="btn" type="primary">选择经纬度</el-button>
        </el-col>
      </el-row>
      <el-row type="flex" class="rowclass" justify="center">
        <el-col :span="14">
          <el-input
          v-model="savedata.intro"
          type="textarea"
          :autosize="{ minRows: 4, maxRows: 10}"
          placeholder="请输入机构简介"
          >
        </el-input>
        </el-col>
      </el-row>
      <el-row type="flex" class="rowclass" justify="center">
        <el-col :span="14">
           <el-button @click="save" class="btn" type="primary">{{btnmsg}}</el-button>
        </el-col>
      </el-row>
    <el-dialog title="请选择坐标" width="60%" :visible.sync="alert">
      <div class="amap-page-container">
        <el-amap-search-box
            id="search-box"
            :search-option="searchOption"
            :on-search-result="onSearchResult"
          ></el-amap-search-box>
        <el-amap
          vid="amapDemo"
          :center="center"
          :zoom="zoom"
          class="amap-demo"
          :events="events"
        >
          <el-amap-marker
            :position="marker.position"
            :events="marker.events"
            :visible="marker.visible"
            :draggable="marker.draggable"
          ></el-amap-marker>
        </el-amap>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button  type="primary" @click="alert = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style>
.btn{
  width: 100%;
}
.rowclass{
  margin-top: 15px;
}
.r{
  display: flex;
  justify-content: flex-end;
}
.a>div{
  margin-top: 10px;
}
.el-vue-amap-container.amap-demo {
  width: 100%;
  height: 400px;
}
#search-box {
  position: absolute;
  top: 10px;
  left: 10px;
}
.amap-page-container {
  position: relative;
}

.el-upload--picture-card {
  margin: 1%;
  position: relative;
  overflow: hidden;
  display: inline-block;
}
.close {
  opacity: 0;
  transition: opacity 0.3s;
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s;
}
.el-upload--picture-card:hover .close {
  opacity: 1;
}
.close > i {
  margin: auto;
}
</style>
<script>
import axios from "axios";
import { Geocoder } from "vue-amap";
import { saveogz,getogz } from "@/api/user/organization"
export default {
  data() {
    let self = this,
    domain = process.env.VUE_APP_BASE_API;
    return {
      btnmsg:"注册",
      domain:domain,
      savedata:{
        name:'',
        tel:'',
        o_rate:'',
        address:'',
        intro:'',
        longitude:'',
        latitude:'',
        logo:''
      },
      imgsrc: [],
      alert: false,
      zoom: 20,
      center: [110.334253, 19.981358],
      searchOption: {
        city: "海南",
        citylimit: true,
      },
      marker: {
        position: [0, 0],
      },
      events: {
        click(e) {
          console.log(e);
          let { lng, lat } = e.lnglat;
          self.lng = lng;
          self.lat = lat;
          self.marker.position = [lng, lat];
          // 这里通过高德 SDK 完成。
        },
      },
      lng: 0,
      lat: 0,
    };
  },
  created(){
    console.log(this.$route.query.id)
    if(this.$route.query.id){
      this.getogz()
    }
  },
  methods: {
    save(){
      let that = this;
      saveogz(that.savedata).then(()=>{
        that.$message({
          type: "success",
          message: "注册成功!",
        })
        that.$router.push({
          path:'list'
        })
      })
    },
    getogz(){
      let that = this;
      getogz({
        field: "o_id",
        op: "=",
        value: that.$route.query.id,
        address: "",
        page:1
      }).then(res=>{
        console.log("编辑",res)
        that.savedata = res[0];
        that.btnmsg = "修改"
        let obj = {
          showimg:res[0].logo
        };
        that.imgsrc.push(obj)
        console.log(that.imgsrc)
      })
    },
    ck() {
      if (this.imgsrc.length === 0) {
        document.getElementById("upload").click();
      } else {
        this.$message({
          type: "error",
          message: "封面只可以上传一张",
        });
      }
    },
    getimg(e) {
      var str = [],
        that = this,
        config = {
          headers: { "Content-Type": "multipart/form-data" },
        };
      e.target.files.forEach((file) => {
        var obj = {
          showimg: window.URL.createObjectURL(file),
          uploadimg: "",
        };
        // str.push()
        const formData = new FormData();
        formData.append("uploadfile_ant", file);
        axios
          .post(that.domain + "index/index/upload", formData, config)
          .then(function (res) {
            obj.uploadimg = res.data;
            that.savedata.logo = res.data;
            that.imgsrc.push(obj);
            that.$message({
              type: "success",
              message: "上传成功!",
            });
          })
          .catch(function (error) {
            console.log(error);
            that.$message({
              type: "info",
              message: "上传错误!",
            });
          });
      });
    },
    close(id) {
      this.imgsrc.splice(id, 1);
    },
    onSearchResult(pois) {
      console.log(pois, "pois");
      var lng = pois[0].lng;
      var lat = pois[0].lat;
      this.center = [lng, lat];
      this.marker.position = [lng, lat];
      this.savedata.longitude = lng;
      this.savedata.latitude = lat;
    }
  },
};
</script>